<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 组件综合演示 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.9.21-rc.1/dist/css/layui.css" rel="stylesheet">
  <style>

    table img{
      height: 30px;
    }

  </style>
</head>
<body>

<!--添加的表单-->
<form class="layui-form" action=""  style="display: none; padding: 15px;"  id="addForm">
  <div class="layui-form-item">
    <label class="layui-form-label">产品名称</label>
    <div class="layui-input-block">
      <input type="text" name="pname" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">产品图片</label>
    <div class="layui-input-block">
      <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
        <i class="layui-icon layui-icon-upload"></i>
        <div>点击上传，或将文件拖拽到此处</div>
        <div class="layui-hide" id="ID-upload-demo-preview">
          <hr> <img src="" alt="上传成功后渲染" style="max-width: 200px">
        </div>
      </div>
      <input type="text" name="img" id="img1" readonly required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-block">
      <input type="text" name="price" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">原价</label>
    <div class="layui-input-block">
      <input type="text" name="oldPrice" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">口味</label>
    <div class="layui-input-block">
      <input type="text" name="taste" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">上下架</label>
    <div class="layui-input-block">
      <input type="radio" name="saleOnOff" value="1" title="上架">
      <input type="radio" name="saleOnOff" value="0" title="下架" checked>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>




<!--修改的表单 -->
<form class="layui-form" action=""  style="display: none; padding: 15px;"  id="updateForm" lay-filter="updateForm">
  <div class="layui-form-item">
    <label class="layui-form-label">id</label>
    <div class="layui-input-block">
      <input type="text" name="id" readonly required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">产品名称</label>
    <div class="layui-input-block">
      <input type="text" name="pname" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">产品图片</label>
    <div class="layui-input-block">
      <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag2">
        <i class="layui-icon layui-icon-upload"></i>
        <div>点击上传，或将文件拖拽到此处</div>
        <div class="layui-hide" id="ID-upload-demo-preview2">
          <hr> <img src="" alt="上传成功后渲染" style="max-width: 200px">
        </div>
      </div>
      <input type="text" name="img" id="img2" readonly required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-block">
      <input type="text" name="price" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">原价</label>
    <div class="layui-input-block">
      <input type="text" name="oldPrice" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">口味</label>
    <div class="layui-input-block">
      <input type="text" name="taste" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">上下架</label>
    <div class="layui-input-block">
      <input type="radio" name="saleOnOff" value="1" title="上架">
      <input type="radio" name="saleOnOff" value="0" title="下架" checked>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo2">立即修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<!--修改的表单结束-->

<!--表格容器-->
<div style="padding: 16px;">
  <table class="layui-hide" id="test" lay-filter="test"></table>
</div>


<!--头部工具条-->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>


<!--行内工具条-->
<script type="text/html" id="toolDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
  </div>
</script>





<script src="//unpkg.com/layui@2.9.21-rc.1/dist/layui.js"></script>
<script>
  layui.use(['table', 'dropdown'], function(){
    var table = layui.table;
    var $ = layui.$;
    var form = layui.form;
    var upload = layui.upload;


    // 上传组件的渲染--添加
    upload.render({
      elem: '#ID-upload-demo-drag',
      url: 'fileUpload', // 实际使用时改成您自己的上传接口即可。
      done: function(res){
        layer.msg('上传成功');
        $('#ID-upload-demo-preview').removeClass('layui-hide')
                .find('img').attr('src', "/showPic/"+res.data);
        //将上传成功的图片名称放在输入框中
        $("#img1").val(res.data);
        console.log(res)
      }
    });

    // 上传组件的渲染--修改
    upload.render({
      elem: '#ID-upload-demo-drag2',
      url: 'fileUpload', // 实际使用时改成您自己的上传接口即可。
      done: function(res){
        layer.msg('上传成功');
        $('#ID-upload-demo-preview2').removeClass('layui-hide')
                .find('img').attr('src', "/showPic/"+res.data);
        //将上传成功的图片名称放在输入框中
        $("#img2").val(res.data);
        console.log(res)
      }
    });



    //监听提交----添加
    form.on('submit(formDemo)', function(data){
      // 向服务端发送请求
      $.ajax({
        url:'/product/',
        type:'post',
        data:JSON.stringify(data.field),
        contentType:'application/json',
        dataType:'json',
        success:function(res){
          layer.closeAll();
          table.reload("test",{});
        }
      })
      return false;
    });

    //监听提交----修改
    form.on('submit(formDemo2)', function(data){
      // 向服务端发送请求
      $.ajax({
        url:'/product/',
        type:'put',
        data:JSON.stringify(data.field),
        contentType:'application/json',
        dataType:'json',
        success:function(res){
          layer.closeAll();
          table.reload("test",{});
        }
      })
      return false;
    });







    // 创建渲染实例---表格
    table.render({
      elem: '#test',
      url: '/product/', // 此处为静态模拟数据，实际使用时需换成真实接口
      toolbar: '#toolbarDemo',
      cellMinWidth: 80,
      page: true, //分页
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRow: '合计：'},
        {field:'pname', width:100, title: '产品名称'},
        {field:'img', width:100, title: '图片',templet:'<div> <img src="/showPic/{{d.img}}"  /> </div>'},
        {field:'price', width:80, title: '价格'},
        {field:'oldPrice', width:80, title: '原价'},
        {field:'taste', width:80, title: '口味'},
        {field:'saleMonth', width:80, title: '月销量'},
        {field:'saleOnOff', width:90, title: '上下架' , templet: function(d){
            if(d.saleOnOff==0){
              return '<input type="checkbox" value="'+d.id+'" name="open" lay-skin="switch" lay-filter="switchTest" title="上架|下架" >';
            }else if(d.saleOnOff==1){
              return '<input type="checkbox" checked value="'+d.id+'" name="open" lay-skin="switch" lay-filter="switchTest" title="上架|下架" > ';
            }
          }
        },
        {field:'tid', width:80, title: '分类id'},
        {field:'weight', width:80, title: '权重'},
        {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
      ]]
    });


    // 指定开关事件---快速上下架
    form.on('switch(switchTest)', function(data){
      //准备参数
      var param = {'id':data.value,"saleOnOff":this.checked?1:0}
      // 向服务端发送请求
      $.ajax({
        url:'/product/',
        type:'put',
        data:JSON.stringify(param),
        contentType:'application/json',
        dataType:'json',
        success:function(res){
          // layer.closeAll();
          // table.reload("test",{});
          console.log(res);
        }
      })
    });



    // 工具栏事件
    table.on('toolbar(test)', function(obj){
      var id = obj.config.id;
      var checkStatus = table.checkStatus(id);
      var othis = lay(this);
      switch(obj.event){
        case 'add':
          //重置表单
          $('#addForm')[0].reset();
          layui.form.render();
          $('#ID-upload-demo-preview').addClass('layui-hide')
                  .find('img').attr('src', '');
          //弹窗
          layer.open({
            title: '新增',
            type: 1,
            area: ['80%','80%'],
            content: $("#addForm")
          });
          break;
      };
    });


    // 触发单元格工具事件
    table.on('tool(test)', function(obj){ // 双击 toolDouble
      var data = obj.data; // 获得当前行数据
      // console.log(obj)
      if(obj.event === 'edit'){
        //设置表单的数据显示（回显）
        form.val("updateForm",data);
        //设置图片的展示
        $('#ID-upload-demo-preview2').removeClass('layui-hide')
                .find('img').attr('src', '/showPic/'+data.img).css('width','100px');
        //弹窗
        layer.open({
          title: '编辑 - id:'+ data.id,
          type: 1,
          area: ['80%','80%'],
          content: $("#updateForm")
        });
      } else if(obj.event === 'del'){
        layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
          obj.del(); // 删除对应行（tr）的DOM结构
          layer.close(index);
          // 向服务端发送删除指令
          $.ajax({
            url:'/product/'+data.id,
            type:'delete',
            dataType:'json',
            success:function(res){
              console.log(res);
              if(res.code==200){
                layer.msg("删除成功");
              }
            }
          })
        });
      }
    });


  });
</script>
</body>
</html>